<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">sOffice-Quản trị phòng ban</ui:define>
    <ui:define name="content">
        <!-- Tab Menu -->
        <ui:include src="/templates/tabmenu.xhtml">
            <ui:param name="tabIndex" value="5"/>
        </ui:include>
        
        <p:outputPanel style="height: 100%;">
            <p:layout style="height: 100%;">  
                <p:layoutUnit position="west" resizable="true" minSize="210">  
                    <ui:include src="/admin/leftmenu.xhtml"/>
                </p:layoutUnit>

                <p:layoutUnit position="center">
                    <h:form id="mainForm">
                        <p:panel header="Quản trị phòng ban">
                            <p:messages id="msgs"/>
                            <p:toolbar style="margin-bottom: 10px; margin-top: 10px;">
                                <p:toolbarGroup align="left">  
                                    <p:button value="Tạo mới" outcome="new"/>
                                    <p:commandButton value="Sửa" action="#{deptBean.preEditAction()}"/>
                                    <p:commandButton value="Xoá" action="#{deptBean.preDeleteAction()}" oncomplete="handleDeleteRequest(xhr, status, args)"/>
                                </p:toolbarGroup>
                            </p:toolbar>

                            <p:dataTable var="dept" value="#{deptBean.deptList}" paginator="true" rows="10"
                                         paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"  
                                         rowsPerPageTemplate="10,20,30" rowKey="#{dept.id}"
                                         selection="#{deptBean.selectedDepts}">
                                <f:facet name="header">Danh sách phòng ban</f:facet>
                                <p:column selectionMode="multiple" />
                                <p:column headerText="Tên">
                                    <h:outputText value="#{dept.name}"/>  
                                </p:column>
                                <p:column headerText="Mã phòng ban">
                                    <h:outputText value="#{dept.code}"/>  
                                </p:column>
                                <p:column headerText="Điện thoại">
                                    <h:outputText value="#{dept.phone}"/>  
                                </p:column>
                                <p:column headerText="Fax">
                                    <h:outputText value="#{dept.fax}"/>  
                                </p:column>
                                <p:column headerText="Địa chỉ">
                                    <h:outputText value="#{dept.address}"/>  
                                </p:column>
                            </p:dataTable>
                            
                            <p:dialog header="Thông báo" widgetVar="deleteConfirmDialog" width="300" showEffect="explode" hideEffect="explode">
                                <h:panelGrid columns="1">
                                    <f:facet name="header">
                                        <h:outputText value="Bạn có muốn xoá phòng ban này?"/>
                                    </f:facet>
                                    <h:panelGroup>
                                        <p:commandButton value="Có" oncomplete="deleteConfirmDialog.hide()" update="mainForm" 
                                                         actionListener="#{deptBean.deleteAction()}"/>
                                        <p:commandButton value="Không" onclick="deleteConfirmDialog.hide()" type="button" />
                                    </h:panelGroup>
                                </h:panelGrid>
                            </p:dialog>
                            
                            <script type="text/javascript">
                                function handleDeleteRequest(xhr, status, args) {
                                    if(args.validationFailed || args.invalid) {
                                        ;  
                                    } else {
                                        deleteConfirmDialog.show();
                                    }
                                }  
                            </script>
                        </p:panel>
                    </h:form>
                </p:layoutUnit>  
            </p:layout>
        </p:outputPanel>
    </ui:define>
</ui:composition>
